<!doctype html>
<html lang="en">

<head>
  <title>Reference Extractor</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <link rel="stylesheet" href="css/sticky-footer-navbar.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.3.0/jszip.min.js" integrity="sha256-J0jjrR5bYbE+saHyVcuvt2EIg5JAHN10VWyTHtVJV2E=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/citation-js@0.4.0-10"></script>

  <style>
    .btn {
      white-space: nowrap;
    }
    
    .dropdown-menu {
      font-size: small;
      white-space: nowrap;
      padding-left: 10px;
      padding-right: 10px;
    }
  </style>
</head>

<body class="d-flex flex-column h-100">
  <header>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-expand-md navbar-dark" style="background-color: #6c757d;">
      <div class="container">
        <span class="navbar-brand mb-0 h1">Reference Extractor</span>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Extract Zotero and Mendeley references from Microsoft Word files</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>

  <!-- Begin page content -->
  <main role="main" class="flex-shrink-0">
    <div class="container">
      <div class="row my-3">
        <div class="col-lg-8">
          <p><strong>Reference Extractor</strong> is a free tool to extract <a href="https://www.zotero.org/">Zotero</a> and <a href="https://www.mendeley.com/">Mendeley</a> references from Microsoft Word .docx documents.
            It only works with <em>active</em> citations that have been inserted through the Zotero or Mendeley word processor plugins, and that haven’t been converted to plain text.
            The tool runs locally on your computer, keeping your Word documents and extracted citations private.</p>
          <hr>
          <h4 class="text-center">Input</h4>
          <div class="container">
            <div class="col-lg-11 offset-lg-1">
              <form autocomplete="off">
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="add_citation_counts_toggle">
                  <label class="form-check-label" for="add_citation_counts_toggle">Store cite counts</label>
                  <small id="add_citation_counts_toggle_help" class="form-text text-muted">
                    Select this option to store the cite count (the number of times each item has been cited in the document) in the "note" field of the CSL JSON output. This field matches the "Extra" field in the Zotero user interface.
                  </small>
                </div>
                <div class="form-group">
                  <input id="file_upload" type="file">
                  <small id="file_upload_help" class="form-text text-muted">
                    Select your .docx Word file
                  </small>
                </div>
              </form>
            </div>
          </div>
          <h4 class="text-center">Results</h4>
          <div class="container">
            <div class="col-lg-11 offset-lg-1">
              <form autocomplete="off">
                <div class="form-group row" style="margin-bottom:0px;">
                  <label for="extract_count" class="col-lg-4 col-form-label col-form-label-sm">Number of extracted references</label>
                  <div class="col-lg-8">
                    <input type="text" readonly class="form-control-plaintext form-control-sm" id="extract_count" value="0">
                  </div>
                </div>
                <div class="form-group row" style="margin-bottom:0px;">
                  <label for="selected_style" class="col-lg-4 col-form-label col-form-label-sm">CSL style selected in document</label>
                  <div class="col-lg-8">
                    <input type="text" readonly class="form-control-plaintext form-control-sm" id="selected_style" value="-">
                  </div>
                </div>
                <div class="form-group row" style="margin-bottom:0px;">
                  <label for="output_format" class="col-lg-4 control-label col-form-label-sm">Output format</label>
                  <select id="output_format" class="col-lg-4 custom-select custom-select-sm">
                    <option value="data" selected>CSL JSON</option>
                    <option value="bibtex">BibTeX</option>
                    <option value="ris">RIS</option>
                    <option value="bibliography">Formatted citations (APA style)</option>
                  </select>
                </div>
                <div class="form-group row">
                  <label for="textArea" class="col-lg-4 control-label col-form-label-sm">Extracted references</label>
                  <div class="col-lg-8" style="padding-left:0px;">
                    <button id="download" type="button" class="btn btn-success btn-sm" disabled>Download</button>
                    <button id="copy_to_clipboard" data-clipboard-text="" type="button" class="btn btn-success btn-sm" disabled>Copy to clipboard</button>
                    <div class="btn-group">
                      <button id="zotero_item_selection_button" type="button" class="btn btn-outline-success btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>
                        Select in Zotero <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu" id="zotero_item_selection_link_list"></ul>
                    </div>
                  </div>
                  <div class="col-lg-12" style="padding-left:0px;">
                    <textarea id="textArea" class="form-control form-control-sm" rows="3" readonly style="margin-top: 10px;"></textarea>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <hr>
          <h4>About Reference Extractor</h4>
          <p>Reference extractor allows you to:</p>
          <ul>
            <li>
              <p><strong>Extract</strong> Zotero and Mendeley references and save them to CSL JSON, BibTeX, or RIS format, or as a rendered bibliography in APA style.</p>
              <p><em>Scenario 1</em>: You lost your Zotero/Mendeley library but still have your Word documents.
                Extraction allows you to recover the items you cited in your Word documents and import them back into your reference manager.
                Note that imported items won’t be linked to the items in the Word document you extracted them from.</p>
              <p><em>Scenario 2</em>: Somebody sent you a Word document and you would like to get the cited items into your own reference manager library.</p>
            </li>
            <li>
              <p><strong>Select</strong> the original cited items in your existing Zotero libraries <em>[only available for Zotero]</em>.
                Once items are selected in Zotero, you can drag the items into a new collection or apply a tag.</p>
              <p><em>Scenario</em>: You wish to create a collection for the items you’ve cited in a manuscript.</p>
            </li>
            <li>
              <p><strong>Count</strong> the number of times each item has been cited.</p>
            </li>
            <li>
              <p><strong>Identify</strong> the <a href="https://citationstyles.org/">Citation Style Language</a> citation style used in the Word document.</p>
            </li>
          </ul>
          <p>Check the <a href="https://github.com/rmzelle/ref-extractor#reference-extractor">README</a> for more information about this tool and how to use it.</p>
        </div>
        <div class="col-lg-3">
          <div class="card bg-light">
            <h5 class="card-header text-white bg-info">Support</h5>
            <div class="card-body">
              <p class="card-text">Did you find this free tool useful?</p>
              <p class="card-text">If so, please support this open-source project. Star my <a href="https://github.com/rmzelle/ref-extractor/">GitHub repository</a>, or make a small donation:</p>
              <div class="text-center" style="font-size: small;">
                <a href='https://ko-fi.com/rintzezelle' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi4.png?v=2' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>
                <br /><br />
                <p class="card-text">(Ko-fi supports PayPal, credit cards, and Apple Pay)</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>

  <footer class="footer mt-auto py-3">
    <div class="container">
      <span class="text-muted">Created by <a href="https://rintze.zelle.me/" target="_blank">Rintze M. Zelle</a> (<a href="https://twitter.com/rintzezelle/" target="_blank"><img src="images/Twitter_Logo_Blue.svg" width="25" height="25" alt="Rintze Zelle's Twitter" /></a>).
        Powered by GitHub Pages. <a href="https://github.com/rmzelle/ref-extractor/">Code</a> on GitHub.</span>
    </div>
  </footer>
  <script src="libraries/ref-extractor.js"></script>
</body>

</html>
